<template>
  <section class="page">
    <div style="margin-bottom: 15px">
      <!-- 抬头 -->
      <div class="title">{{ this.sessionStorageData.orgNm }}有限公司</div>
      <div class="title">订 购 单</div>
      <div class="horizontal-direction" style="margin-bottom: 10px">
        <div class="horizontal-box">
          厂 商：<span>{{ this.propsForm.vendNm }}</span>
        </div>
        <div class="horizontal-box">
          传 真：<span>{{ this.propsForm.vrFax }}</span>
        </div>
        <div class="horizontal-box">
          采购单号：<span>{{ this.propsForm.orderNo }}</span>
        </div>
      </div>
      <div class="horizontal-direction" style="margin-bottom: 10px; position: relative">
        <div class="horizontal-box">
          负责人：<span>{{ this.propsForm.link }}</span>
        </div>
        <div class="horizontal-box" v-if="this.propsForm.session">
          季 节<span>{{ this.propsForm.session }}</span>
        </div>
        <div class="horizontal-box" style="position: absolute; right: 0">
          订购日期：<span>{{ this.propsForm.ordDate.substring(0, 10) || "" }}</span>
        </div>
      </div>
      <div class="horizontal-direction" style="margin-bottom: 10px; position: relative">
        <div class="horizontal-box">
          电 话：<span>{{ this.propsForm.vrTel }}</span>
        </div>
        <div class="horizontal-box" v-if="this.propsForm.customer">
          客 户：<span>{{ this.propsForm.customer }}</span>
        </div>
        <div class="horizontal-box" style="position: absolute; right: 0">
          交货地点：<span>{{ this.propsForm.place }}</span>
        </div>
      </div>
      <!-- 表格 -->
      <table cellspacing="0" cellpadding="0" border="1" class="out-table" style="width: 100%">
        <thead class="has-gutter">
          <tr class="text-center">
            <th><div>序</div></th>
            <th><div>材料编码</div></th>
            <th><div>材料名称</div></th>
            <th><div>单位</div></th>
            <th><div>数量</div></th>
            <th><div>单价</div></th>
            <th><div>交期</div></th>
            <th><div>材料备注</div></th>
          </tr>
        </thead>
        <tbody>
          <template v-for="item in this.propsForm.detailList || []">
            <tr :key="item.orderSeq + '-only'">
              <td>{{ item.orderSeq }}</td>
              <td>{{ item.itemNo }}</td>
              <td>{{ item.itemName }}</td>
              <td>{{ item.unit }}</td>
              <td>{{ item.ordQty }}</td>
              <td>{{ item.price }}</td>
              <td>{{ item.planDate }}</td>
              <td>{{ item.note }}</td>
            </tr>
          </template>
          <tr v-if="propsForm.type === '6'">
            <td colspan="3" style="border-right: none"></td>
            <td colspan="1" style="border-right: none; border-left: none;text-align: right;">Total:</td>
            <td colspan="1" style="border-left: none;border-right: none; text-align: center">{{ total }}</td>
            <td colspan="3" style="border-left: none;"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="base-stamp">
      <table cellspacing="0" cellpadding="0" border="0" class="el-table__header table-flow">
        <thead class="has-gutter">
          <tr class="text-left">
            <th><div class="examine-cell">签核角色</div></th>
            <th><div class="examine-cell">审核人员</div></th>
            <th><div class="examine-cell">审核状况</div></th>
            <th><div class="examine-cell">审核意见</div></th>
            <th><div class="examine-cell">审核时间</div></th>
          </tr>
        </thead>
        <tbody>
          <template>
            <tr class="text-left" v-for="(item, index) in propsForm.qhChkmgrdList || []" :key="index">
              <td>
                <div>{{ item.flowDesc }}</div>
              </td>
              <td>
                <div>{{ item.toUserCname }}</div>
              </td>
              <td>
                <div>{{ item.chkStatusName }}</div>
              </td>
              <td>
                <div>{{ item.chkOk }}</div>
              </td>
              <td>
                <div>{{ item.chkDate }}</div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <div class="horizontal-direction horizontal-sign">
      <div class="text-left">总经理签核:</div>
      <div class="sign"></div>
    </div>
  </section>
</template>

<script>
module.exports = {
  props: {
    propsForm: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      sessionStorageData: JSON.parse(sessionStorage.parameterData),
      applicationForm: {
        detailList: [],
      },
    };
  },
  computed: {
    total() {
      const list = this.propsForm.detailList;
      const total = list.reduce((pre, cur) => {
        pre += +cur.ordQty;
        return pre;
      }, 0);
      return +total.toFixed(2);
    },
  },
  mounted() {},
};
</script>

<style>
.page {
  margin: auto;
  width: 100%;
  max-width: 297mm;
}
.title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}
.out-table {
  border-collapse: separate;
  box-sizing: border-box;
}
.out-table th {
  background-color: #b3ffb3;
}
</style>
